<template>
  <div id="app">
    <Top />
    <!-- <Banner /> -->
    <router-view></router-view>
    <Bottom />
    <div class="motaik" v-show="show">
      <div class="mot"></div>
      <div class="dengl">
        <div class="motai-top">
          <div class="mt-dl">登录</div>
          <div class="mt-gb" @click="guanb">X</div>
        </div>
        <div class="motai-bottom">
          <div class="img"></div>
          <div>二维码图片暂时实现不了动态的。。。。</div>
          <div class="dl">选择其他登录模式</div>
        </div>
      </div>
    </div>
    <!-- 回顶部按钮 -->
    <Gotop />
  </div>
</template>

<script>
import Top from "./components/Top.vue";
// import Banner from "./components/Banner.vue";
// import Carousel from "./components/Carousel.vue";
// import Context from "./components/Context.vue";
import Bottom from "./components/Bottom.vue";
import Gotop from "./components/Gotop.vue";

export default {
  name: "App",
  components: { Top, Bottom, Gotop },

  data() {
    return {
      show: false,
    };
  },
  methods: {
    guanb() {
      this.show = false;
    },
  },
  mounted() {
    this.$bus.$on("denglu", (data) => {
      console.log(data);
      this.show = data;
    });
  },
};
</script>

<style scoped>
#app {
  position: relative;
}
.motaik {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.65);
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.dengl {
  width: 530px;
  height: 366px;
  border-radius: 10px;
  position: fixed;
  top: 10%;
  overflow: hidden;
}
.motai-top {
  width: 100%;
  height: 39px;
  background-color: #2d2d2d;
  line-height: 39px;
}
.motai-bottom {
  width: 100%;
  height: 326px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}
.mt-dl {
  color: #fff;
  font-size: 14px;
  float: left;
  margin-left: 10px;
}
.mt-gb {
  color: #ccc;
  font-size: 17px;
  float: right;
  margin-right: 12px;
  cursor: pointer;
}
.mt-gb:hover {
  color: red;
}
.img {
  background: url("./assets/saoma.png");
  width: 125px;
  height: 221px;
  /* background-color: pink; */
  background-size: 126px;
  background-position: 0px 0px;
  margin-top: 25px;
}
.dl {
  width: 125px;
  height: 27px;
  position: absolute;
  bottom: 32px;
  border: 1px solid #a5a5a5;
  border-radius: 12px;
  text-align: center;
  line-height: 27px;
  cursor: pointer;
}
.dl:hover {
  border: 1px solid skyblue;
  color: skyblue;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
